<template>
    <div>
        <el-upload :action="action" list-type="picture-card" :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove" :on-success="handleSuccess" :name="name" :headers="headers" :file-list="fileList"
            :limit="limit">
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
import { baseURL } from '@/axios'
export default {
    props: {
        action: {
            type: String,
            default: baseURL + '/biz/uploadImgage'
        },
        name: {
            type: String,
            default: 'image'
        },
        headers: {
            type: Object,
            default: () => ({
                kua_token: localStorage.getItem('kua_token'),
            })
        },
        value: {
            type: String,
            default: ''
        },
        limit: {
            type: Number,
            default: 1
        }
    },
    data: () => ({
        dialogImageUrl: '',
        dialogVisible: false,
    }),
    computed: {
        fileList: {
            get() {
                console.log('this.value', this.value);
                if (this.value) {
                    const arr = this.value.split(',')
                    return arr.map(item => {
                        return {
                            name: item,
                            url: this.$imgUrl(item)
                        }
                    })
                } else {
                    return []
                }
            },
        }
    },
    created() {
    },
    mounted() {
    },
    methods: {
        // 上传成功
        handleSuccess(response, file, fileList) {
            console.log('1111', fileList);
            if (response.code !== '200') {
                this.$message.error(response.msg);
                return;
            } else {
                this.handleEmit(fileList)
                this.$message.success('上传成功');
            }
        },
        // 移除图片
        handleRemove(file, fileList) {
            this.handleEmit(fileList)
        },
        // 处理数据
        handleEmit(fileList) {
            if (fileList.length >= 1) {
                const arr = fileList.map(item => {
                    if (item.response) {
                        return item.response.data.imgageUrl
                    } else {
                        const reg = new RegExp(/^http.*?\.cn\//g, 'g')
                        return item.url.replace(reg, '')
                    }
                })
                this.$emit('onChange', arr.join(','))
            } else {
                this.$emit('onChange', "")
            }
        },
        // 预览
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        }
    }
}

</script>

<style lang="less" scoped></style>